<script lang="ts" setup>
import { Button, ActionSheet } from 'vant';
import {ref} from 'vue';
import { useRouter,useRoute } from 'vue-router'
import {useUserStore} from '@/stores/index'
import ChooseAlbum from './components/chooseAlbum.vue';
import {canUseCamera} from '@/utils/index'
const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

let selectKey = ''

const showAction = ref(false)
 function onActionSelect(item){

  if(item.name == '相册选择'){
    showAlbum.value.open()
  }else{
    const type = selectKey== 'idcardFaceUri'? 1:2
    setTimeout(() => {
      router.push('/camera?path=/query/upload1&type='+type)
    },500)
  }
}
async function handleShowAction(key){
  const res = await canUseCamera()
  selectKey = key;
  if(res){
    showAction.value = true;
  }else{
    //无法使用自定义相机，直接调气文件上传
    showAlbum.value.open()
  }
  
}

const showAlbum = ref<any>({})
function handleUpload(base64String){
  userStore[selectKey] = base64String;
}
</script>
<template>
  <div class="container-box">
    <div class="logo-box">
      上传信息查询
    </div>
    <div class="content">
      <div class="img-box">
        <div class="left">
          <div class="text1">头像面</div>
          <div class="text2">上传您的身份正正面</div>
        </div>
        <div @click="handleShowAction('idcardFaceUri')"  class="right">
        <img v-if="userStore.idcardFaceUri" :src="userStore.idcardFaceUri" class="bg" lt="">
        <img v-else  src="@/assets/query/card2.png" class="bg" alt="">
        <img class="seal" src="@/assets/query/seal.png" alt="">
        </div>
      </div>
      <div style="margin-top: 20px;"  class="img-box">
        <div class="left">
          <div class="text1">国徽面</div>
          <div class="text2">上传您的身份正反面</div>
        </div>
        <div @click="handleShowAction('idcardBackUri')" class="right">
        <img  v-if="userStore.idcardBackUri" :src="userStore.idcardBackUri" class="bg" lt="">
        <img v-else src="@/assets/query/card2.png" class="bg" alt="">
        <img class="seal" src="@/assets/query/seal.png" alt="">
        </div>
      </div>
      <Button 
        type="primary"
        @click="router.push('/query/upload2')" 
        :disabled="!userStore.idcardBackUri&&!userStore.idcardFaceUri" style="margin-top: 36px;" block >上传证件</Button>
    </div>
  </div>

  <ActionSheet v-model:show="showAction " cancel-text="取消" 
   
    close-on-click-action :actions="[
    {
      name:'拍照'
    },
    {
      name:'相册选择'
    }
  ]" @select="onActionSelect" />
  <ChooseAlbum @on-confirm="handleUpload"  ref="showAlbum"/>

</template>
<style lang="less" scoped>
.container-box {
  .logo-box {
    font-size: 31px;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }

  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  .content {
    border-radius: 10px;
    width: var(--content-width);
    margin: 40px auto 0;
    background-color: #fff;
    padding: 50px 20px 25px;

    .img-box {
      border-radius:6px;
      display: flex;
      align-items: center;
      background-color: rgb(244, 246, 255);
      padding: 17px 8px;
      justify-content: center;
      .left{
        margin-right: 4px;
        .text1{
          font-size: 18px;
          font-weight: 500;
          color: #333;
        }
        .text2{
          font-size: 12px;
          color: #767676;
          margin-top:7px;
        }

      }
      .right{
        position: relative;
        .bg{
          width: 176px;
          height: 104px;
        }
        .seal {
        position: absolute;
        left: 50%;
        top: 50%;
        width:50px;
        height:50px;
        transform: translate(-50%, -50%);
      }
      }

      
    }

  }
}
</style>